<template>
  <!-- <button @click="flag = !flag">Toggle</button> -->
  <Transition @enter="onEnter" appear>
    <h1 class="title">
      <span>Call me </span>
      <span id="type-writer"></span>
    </h1>
  </Transition>
</template>

<script setup>
// import { ref } from 'vue'
import { gsap } from 'gsap'
import { TextPlugin } from 'gsap/TextPlugin'

// 关闭曲线动画效果
gsap.defaults({ ease: 'none' })
// 注册文本插件
gsap.registerPlugin(TextPlugin)

// const flag = ref(false)

const genTextWriterTL = (el, text, done, color = '#000') => {
  return gsap
    .timeline({
      delay: 0.5,
      repeat: 1,
      yoyo: true,
      repeatDelay: 0.5
    })
    .set(el, { color })
    .to(el, {
      text,
      duration: (2 / 12) * text.length,
      onReverseComplete: done
    })
}

const onEnter = (el, done) => {
  // 创建时间线动画
  // gsap.timeline(配置对象).to(动画效果)
  // 1. 创建 timeline 动画的容器（队列）
  const tl = gsap.timeline({ repeat: -1 })
  const animateEl = el.querySelector('#type-writer')

  // 2. tl.add() 方法，添加多个 timeline 动画效果
  tl.add(genTextWriterTL(animateEl, 'Liu Longbin.', done, 'rgb(34,111,222)'))
  tl.add(genTextWriterTL(animateEl, 'ESCOOK.', done, 'rgb(0, 162, 16)'))
  tl.add(genTextWriterTL(animateEl, '刘龙彬。', done, '#ff00ff'))
}
</script>

<style scoped>
/* .title {
  &::before {
    content: 'Call me ';
    color: #000;
  }
} */
</style>
